<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <el-collapse v-model="activeNames">
        <el-collapse-item name="targetLog">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">转办信息</div>
            </div>
          </template>
          <div>
            <target-log-for-current-user :targetId="targetId"></target-log-for-current-user>
          </div>
        </el-collapse-item>
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">意见征求信息</div>
            </div>
          </template>
          <div>
            <opinion-detail :opinionId="$route.params.id"></opinion-detail>
          </div>
        </el-collapse-item>
        <el-collapse-item name="2" style="margin-top: -12px">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">分解方案信息</div>
            </div>
          </template>
          <div>
            <table class="bs-table">
              <tr class="bs-table_row">
                <th class="bs-table_th" style="width: 200px">规划名称</th>
                <td class="bs-table_td" colspan="3">{{programDetailData.planningTitle}}</td>
              </tr>
              <tr class="bs-table_row">
                <th class="bs-table_th" style="width: 200px">方案描述</th>
                <td class="bs-table_td" colspan="3">{{programDetailData.description}}</td>
              </tr>
              <tr class="bs-table_row">
                <th class="bs-table_th">附件</th>
                <td class="bs-table_td" colspan="3">
                  <div v-for="fileid in programDetailData.files" :key="fileid">
                    <preview :attachementId="fileid" v-if="fileid"></preview>
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <div style="margin: 0px 0px -17px 10px">
            <p style="font-size:22px;font-weight: 600;margin:10px auto;float: left;">包含本部门的分解项 : </p>

            <p style="font-size:18px;font-weight: 600;margin:10px auto;float: left;line-height: 42px">
              如对以下分解项有修改意见的请点击分解项后的“填写意见”按钮进行修改</p>
          </div>
          <avue-crud :data="normListData"
                     :option="normTableOption"
                     :page="normPage"
                     :table-loading="normTableLoading"
                     @on-load="getNormList"
                     @size-change="sizeChange"
                     @current-change="currentChange"
                     class="avuecrud">
            <template slot-scope="scope" slot="menu">
              <div class="menu-title" @click.stop="viewTargetList(scope.row,scope.index)">
                <i class="iconfont iconview icon-primary"></i>
                <p class="menu-title-text">查看目标</p>
              </div>
              <div class="menu-title" @click.stop="editItem(scope.row,scope.index)">
                <i class="iconfont iconalter icon-warning"></i>
                <p class="menu-title-text">填写意见</p>
              </div>
            </template>
          </avue-crud>
          <div style="margin: -15px 0px -17px 10px">
            <p style="font-size:22px;font-weight: 600;margin:10px auto;float: left;">不包含本部门的分解项 : </p>

            <p style="font-size:18px;font-weight: 600;margin:10px auto;float: left;line-height: 42px">
              如对以下分解项有修改意见的请点击分解项后的“填写意见”按钮进行修改</p>
          </div>

          <avue-crud :data="normListDataOthers"
                     :option="normTableOptionOthers"
                     :page="normPageOthers"
                     :table-loading="normTableLoadingOthers"
                     @on-load="getNormListOthers"
                     @size-change="sizeChangeOthers"
                     @current-change="currentChangeOthers"
                     class="avuecrud">
            <template slot-scope="scope" slot="menu">
              <div class="menu-title" @click.stop="viewTargetList(scope.row,scope.index)">
                <i class="iconfont iconview icon-primary"></i>
                <p class="menu-title-text">查看目标</p>
              </div>
              <div class="menu-title" @click.stop="editItem(scope.row,scope.index)">
                <i class="iconfont iconalter icon-warning"></i>
                <p class="menu-title-text">填写意见</p>
              </div>
            </template>
          </avue-crud>
        </el-collapse-item>
        <el-collapse-item name="3">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">其他意见</div>
            </div>
          </template>
          <el-form
            label-width="130px"
            :model="opinionForm"
            style="padding-right: 30px;"
            :rules="notOpinionRules"
            ref="opinionForm"
          >
            <el-row>
              <el-col :span="11">
                <el-form-item class="form-item-release" label="意见类型 :" prop="hasOpinion">
                  <!-- <el-radio v-model="opinionForm.hasOpinion" label="0">无意见</el-radio> -->
                  <el-radio v-model="opinionForm.hasOpinion" label="1">修改意见</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11" style="margin-top: 27px">
                <el-form-item class="form-item-release" label="其他意见 :" prop="opinion">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 4, maxRows: 4}"
                    placeholder="请输入意见"
                    v-model="opinionForm.opinion"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item class="form-item-release" label="联系人 :" prop="contactName">
                  <el-input
                    v-model="opinionForm.contactName"
                    placeholder="请输入联系人"
                    style="width: 280px"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item class="form-item-release" label="联系电话 :" prop="contactNumber">
                  <el-input
                    v-model="opinionForm.contactNumber"
                    placeholder="请输入联系电话"
                    style="width: 280px"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="form-group-file" style="margin-top:12px;" v-if="toDoOrnot=='0'">
            <span class="form-label-file">相关材料:</span>
            <el-upload
              class="upload-demo"
              action="string"
              :http-request="fileUploadRequest"
              :on-preview="fileHandlePreview"
              :on-remove="fileHandleRemove"
              :file-list="fileTypeIds['相关材料']"
              :auto-upload="true">
              <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
          <div style="margin-top: 18px;margin-left: 82px;" v-if="toDoOrnot=='1'">
            <p class="" style="float:left;font-weight: 600;margin-bottom: 0px;">附件 ：</p>
            <div v-for="(file,index) in files" :key="index" class="relateddiv">
              <el-tooltip class="item" effect="dark" content="下载资料" placement="top-start">
                <el-button class="downbtn" @click="fileDownload(file.fileId,file.fileName)">
                  <img src="img/download-blue.png" class="detail-data-img"/><span>下载</span>
                </el-button>
              </el-tooltip>
              <p class="detail-data-file" v-if="file.fileName">{{file.fileName}}</p>
            </div>
            <p class="detail-data-file" v-if="files.length==0">无</p>
          </div>
          <div class="form-submit" v-if="toDoOrnot=='0'">
            <el-button type="primary" @click.stop="updateForm()">提交</el-button>
            <el-button type="info" @click.stop="goBack()">关闭</el-button>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-dialog title="规划详情" :visible.sync="detailDialogVisible" width="70%">
        <bostech-detail :detail-data="detailData"></bostech-detail>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click.stop="detailDialogVisible == false">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="查看目标" :visible.sync="viewTargetVisible" width="1000px">
        <avue-crud
          :data="targetListData"
          :option="targetOption"
          :page="targetpage"
          @on-load="getTargetListData"
          :table-loading="targetTableLoading"
          @size-change="targetsizeChange"
          @current-change="targetcurrentChange"
          class="avuecrud"
        >
        </avue-crud>
        <div slot="footer" class="dialog-footer">
          <el-button @click="viewTargetVisible=false">关 闭</el-button>
        </div>
      </el-dialog>
      <el-dialog title="填写修改意见" :visible.sync="editItemVisible" width="1000px">
        <el-form
          label-width="130px"
          :model="opinionEditForm"
          style="padding-right: 30px;"
          :rules="opinionEditFormRules"
          ref="opinionEditForm"
        >
          <el-row>
            <el-col :span="22">
              <el-form-item class="form-item" label="修改意见 :" prop="opinionContent">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4}"
                  placeholder="请输入修改意见"
                  v-model="opinionEditForm.opinionContent"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitEditForm">确 定</el-button>
          <el-button @click="editItemVisible=false">关 闭</el-button>
        </div>
      </el-dialog>
      <!--分解项详情弹窗-->
      <el-dialog title="详情" :visible.sync="itemDetailVisible" width="70%">
        <div style="margin-left: 9px; margin-top: -70px;">
          <bostech-detail :detail-data="itemDetailData"></bostech-detail>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="itemDetailVisible=false">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script>
  import {getOpinion, programFormOpinion, formOpinion} from "@/api/opinion";
  import getOpinionDetail from "@/mixins/opinion/getOpinionDetail";
  import fileTypeMixin from "@/mixins/fileTypeMixin";
  import {getFileTypeFiles, getNotNull} from '@/views/util'
  import getResultDetailData from "@/mixins/planning/getResultDetailData";
  import {getPlanSubjectList} from "@/api/subject";
  import {
    getProgramDetail,
    decomposeDraftDetailListUnit,
    decomposeDraftDetailListOthers,
    workingItemTargetPage,
    submitItemOpinion,
    getItemOpinion,
    decomposeItemDetail
  } from "@/api/pim/pim";
  import {getfileinfopage} from "@/api/system"
  import opinionDetail from "@/components/opinion/detail"

  export default {
    name: "opinionBackProgram",
    mixins: [fileTypeMixin, getOpinionDetail(), getResultDetailData()],
    components: {
      opinionDetail
    },
    created() {
      window.itemDetail = this.itemDetail;
      // this.getDetailData_opinion(this.$route.params.id);
      this.toDoOrnot = this.$route.query.toDoOrnot;
      this.state = this.$route.query.state;
      this.title = this.$route.query.title;
      this.putProgramDetailData();
      if (this.$route.query.toDoOrnot != undefined && this.$route.query.toDoOrnot == '1') {
        this.putFeedbackForm();
      }
      this.targetId = this.$route.query.targetId;
    },
    data() {
      return {
        targetId: null,
        headerData: {
          title: '分解方案意见征求反馈'
        },
        typeControlDetail: '',
        fileType: '相关材料',
        // 当前的表单信息
        formContentHtml: '',
        detailData: [],
        activeNames: ['1', '2', '3', 'targetLog'],
        toDoOrnot: '0',
        state: '',
        files: [],
        title: '',//对应类型名称
        btnName: '',
        detailDialogVisible: false,
        assignDeptDetailData: [],
        opinionForm: {
          hasOpinion: '1',
          contactName: '',
          contactNumber: '',
          opinion: '',
        },
        hasOpinionFlag: true,
        notOpinionRules: {
          opinion: [
            {required: false}
          ],
          contactName: [
            {required: true, message: "请输入联系人", trigger: "blur"}
          ],
          contactNumber: [
            {required: true, message: "请输入联系电话", trigger: "blur"}
          ],
        },
        programDetailData: {
          planningTitle: '',
          description: '',
          files: [],
        },
        normListData: [],
        normListDataOthers: [],
        normTableOption: {
          page: true,
          menuWidth: 220,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: false,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          menu: true,
          searchBtn: false,
          keyId: "id",
          column: [
            {
              label: "类型",
              width: 100,
              prop: "type",
              cell: true,
              dicData: [
                {
                  label: "指标",
                  value: "1"
                },
                {
                  label: "任务",
                  value: "2"
                },
                {
                  label: "项目",
                  value: "3"
                },
              ]
            },
            {
              label: "名称",
              width: 200,
              prop: "itemName",
              cell: true,
              overHidden: true,
              formatter: function (row, value, label, column) {
                return '<a style="cursor: pointer;" onclick="itemDetail(\'' + row.id + '\')">' + value + '</a>';
              }
            },
            {
              label: "内容",
              width: 200,
              prop: "description",
              cell: true,
              overHidden: true,
            },
            {
              label: "牵头部门",
              prop: "leadDeptName",
              cell: true
            },
            {
              label: "配合部门",
              prop: "cooDeptName",
              cell: true,
            },
          ]
        },
        normTableOptionOthers: {
          page: true,
          menuWidth: 220,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: false,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          menu: true,
          searchBtn: false,
          keyId: "id",
          column: [
            {
              label: "类型",
              width: 100,
              prop: "type",
              cell: true,
              dicData: [
                {
                  label: "指标",
                  value: "1"
                },
                {
                  label: "任务",
                  value: "2"
                },
                {
                  label: "项目",
                  value: "3"
                },
              ]
            },
            {
              label: "名称",
              width: 200,
              prop: "itemName",
              cell: true,
              overHidden: true,
              formatter: function (row, value, label, column) {
                return '<a style="cursor: pointer;" onclick="itemDetail(\'' + row.id + '\')">' + value + '</a>';
              }
            },
            {
              label: "内容",
              width: 200,
              prop: "description",
              cell: true,
              overHidden: true,
            },
            {
              label: "牵头部门",
              prop: "leadDeptName",
              cell: true
            },
            {
              label: "配合部门",
              prop: "cooDeptName",
              cell: true,
            },
          ]
        },
        normPage: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        normPageOthers: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        normTableLoading: false,
        normTableLoadingOthers: false,
        viewTargetVisible: false,
        targetListData: [],
        targetOption: {
          page: true,
          addBtn: false,
          editBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          menuWidth: 100,
          menu: false,
          keyId: "id",
          column: [{
            label: "年份",
            prop: "year",
            cell: true
          },
            {
              label: "目标值",
              width: 250,
              prop: "targetValue",
              cell: true
            },
            {
              label: "目标值单位",
              width: 200,
              prop: "targetValueUnit",
              cell: true
            },
            {
              label: "目标内容",
              width: 250,
              prop: "targetContent",
              cell: true
            },
          ]
        },
        targetpage: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        itemIdTemp: '',
        targetTableLoading: false,
        editItemVisible: false,
        opinionEditForm: {
          opinionContent: '',
          itemId: '',
          id: 0,//意见的id
        },
        deptVisible: false,
        supportDeptVisible: false,
        editItemId: '',
        opinionEditFormRules: {
          opinionContent: [
            {required: true, message: "请输入修改意见", trigger: "blur"}
          ],
        },
        itemDetailData: [],
        itemDetailVisible: false,


      }
    },
    watch: {
      'opinionForm.hasOpinion'(val) {
        if (val == '0') {
          this.hasOpinionFlag = false
        }
        if (val == '1') {
          this.hasOpinionFlag = true
        }
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      // 更新表单信息
      updateForm() {
        this.programUpdateForm();
      },
      // 分解方案 表单提交
      programUpdateForm() {
        this.$refs.opinionForm.validate(valid => {
          if (valid) {
            this.$confirm("确定提交反馈么?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let fileIds = this.getFileIds(this.fileTypeIds[this.fileType]);
              this.opinionForm.hasOpinion = parseInt(this.opinionForm.hasOpinion);
              this.opinionForm.targetId = this.$route.query.targetId;
              this.opinionForm.fileIds = fileIds;
              programFormOpinion(this.opinionForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: '成功',
                    message: '提交成功',
                    type: 'success',
                    duration: 2000
                  });
                  this.$router.go(-1);
                }
              })
            })
          }
        })
      },
      //从已办进入，查看当前部门自己反馈的表单
      putFeedbackForm() {
        formOpinion(Object.assign({
          opinionId: this.$route.params.id,
          targetId: this.$route.query.targetId,
        })).then(async response => {
          var records = response.data.data.records[0];
          this.opinionForm.contactName = records.contactName;
          this.opinionForm.contactNumber = records.contactNumber;
          this.opinionForm.opinion = records.opinion;
          if (records.hasOpinion) {
            this.opinionForm.hasOpinion = '1'
          } else {
            this.opinionForm.hasOpinion = '0'
          }
          if (records.fileIds != null) {
            if (records.fileIds.length != 0) {
              this.files = await getFileTypeFiles(records.fileIds);
            }
          }
        });
      },
      putProgramDetailData() {
        getProgramDetail(this.$route.query.relateId).then(async response => {
          var records = response.data.data;
          this.programDetailData.planningTitle = records.planningTitle;
          this.programDetailData.description = records.description;
          let files = records.fileIds;
          this.programDetailData.files = files;
        });
      },
      currentChange(currentPage) {
        var page = this.normPage;
        page.currentPage = currentPage;
        this.getNormList(page);
      },
      sizeChange(pageSize) {
        var page = this.normPage;
        page.pageSize = pageSize;
        this.getNormList(page);
      },
      getNormList(page) {
        decomposeDraftDetailListUnit(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          draftId: this.$route.query.relateId,
        })).then(response => {
          this.normListData = response.data.data.records;
          this.normPage.total = response.data.data.total;
        })
      },
      currentChangeOthers(currentPage) {
        var page = this.normPageOthers;
        page.currentPage = currentPage;
        this.getNormListOthers(page);
      },
      sizeChangeOthers(pageSize) {
        var page = this.normPageOthers;
        page.pageSize = pageSize;
        this.getNormListOthers(page);
      },
      getNormListOthers(page) {
        decomposeDraftDetailListOthers(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          draftId: this.$route.query.relateId,
        })).then(response => {
          this.normListDataOthers = response.data.data.records;
          this.normPageOthers.total = response.data.data.total;
        })
      },
      viewTargetList(row) {
        this.itemIdTemp = row.id;
        this.viewTargetVisible = true;
        var page = {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        };
        this.getTargetListData(page);
      },
      getTargetListData(page) {
        this.targetTableLoading = true;
        workingItemTargetPage(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          ditemId: this.itemIdTemp,
        })).then(response => {
          this.targetListData = response.data.data.records;
          this.targetpage.total = response.data.data.total;
          this.targetTableLoading = false;
        })
      },
      targetcurrentChange(currentPage) {
        var page = this.targetpage;
        page.currentPage = currentPage;
        this.getTargetListData(page);
      },
      targetsizeChange(pageSize) {
        var page = this.targetpage;
        page.pageSize = pageSize;
        this.getTargetListData(page);
      },
      editItem(row) {
        this.editItemId = row.id;
        this.editItemVisible = true;
        getItemOpinion(row.id).then(response => {
          this.opinionEditForm.opinionContent = response.data.data.opinionContent;
          if (response.data.data != null) {
            this.opinionEditForm.id = response.data.data.id
          }
        })
      },
      submitEditForm() {
        this.$refs.opinionEditForm.validate(valid => {
          if (valid) {
            this.$confirm("确定提交修改意见吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              this.opinionEditForm.itemId = this.editItemId;
              submitItemOpinion(this.opinionEditForm).then(response => {
                if (response.data.code == '0') {
                  this.$message({
                    message: '提交成功！',
                    type: 'success'
                  });
                  this.opinionEditForm.opinionContent = '';
                  this.editItemVisible = false;
                }
              })
            })
          }
        })
      },
      itemDetail(id) {
        if (id != null && id != '') {
          decomposeItemDetail(id).then(response => {
            var records = response.data.data;
            switch (records.type) {
              case '1':
                this.itemDetailData = [
                  {label: '指标名称', value: getNotNull(records.itemName)},
                  {label: '指标内容', value: getNotNull(records.description)},
                  {label: '牵头部门', value: records.leadDeptName},
                  {label: '配合部门', value: records.cooDeptNameList.join('')},
                  {label: '起止日期', value: records.startDate + '-' + records.endDate},
                  {label: '总目标', value: getNotNull(records.totalTarget + records.totalTargetUnit)},
                  {label: '基数', value: getNotNull(records.base)},
                  {label: '年均增长', value: getNotNull(records.yearAverageRise)},
                  {label: '属性', value: getNotNull(records.attribute)},
                  {label: '是否可量化', value: this.quantifiableDic(records.quantifiable)},
                  {label: '分类', value: this.classifyDic(records.classify)},
                  {label: '上报周期', value: getNotNull('年报')},
                ];
                break;
              case '2':
                this.itemDetailData = [
                  {label: '任务名称', value: getNotNull(records.itemName)},
                  {label: '任务内容', value: getNotNull(records.description)},
                  {label: '牵头部门', value: records.leadDeptName},
                  {label: '配合部门', value: records.cooDeptNameList.join('')},
                  {label: '上报周期', value: getNotNull('年报')},
                ];
                break;
              case '3':
                this.itemDetailData = [
                  {label: '项目名称', value: getNotNull(records.itemName)},
                  {label: '项目内容', value: getNotNull(records.description)},
                  {label: '牵头部门', value: records.leadDeptName},
                  {label: '配合部门', value: records.cooDeptNameList.join('')},
                  {label: '起止日期', value: records.startDate + '-' + records.endDate},
                  {label: '总目标', value: getNotNull(records.totalTarget + records.totalTargetUnit)},
                  {label: '是否可量化', value: this.quantifiableDic(records.quantifiable)},
                  {label: '上报周期', value: getNotNull('年报')},
                ];
                break;
            }
          })
        }
        this.itemDetailVisible = true;
      },
      quantifiableDic(val) {
        switch (val) {
          case true:
            return '是';
            break;
          case false:
            return '否';
            break;
          default:
            return '无';
        }
      },
      classifyDic(val) {
        switch (val) {
          case '1':
            return '经济发展';
            break;
          case '2':
            return '创新驱动';
            break;
          case '3':
            return '民生福祉';
            break;
          case '4':
            return '资源环境';
            break;
          default:
            return '无';
        }
      },


    },
  }
</script>

<style lang="scss" scoped>
</style>
